<template>
  <div>
    <van-grid class="document-grid" :column-num="2" :gutter="15">
      <van-grid-item :to="{name: 'handleList'}">
        <div class="grid-item">
          <van-image width="7vw" height="7vw" :src="handle"></van-image>
          <h3>公文办理</h3>
        </div>
      </van-grid-item>
      <van-grid-item :to="{name: 'myDocument'}">
        <div class="grid-item">
          <van-image width="7vw" height="7vw" :src="mine"></van-image>
          <h3>我的公文</h3>
        </div>
      </van-grid-item>
      <van-grid-item :to="{name: 'readyList'}">
        <div class="grid-item">
          <van-image width="7vw" height="7vw" :src="read"></van-image>
          <h3>阅读公文</h3>
        </div>
      </van-grid-item>
      <van-grid-item :to="{name: 'monitor'}">
        <div class="grid-item">
          <van-image width="7vw" height="7vw" :src="watch"></van-image>
          <h3>公文监控</h3>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        handle: require('../../assets/documents/handle.png'),
        mine: require('../../assets/documents/mine.png'),
        read: require('../../assets/documents/read.png'),
        watch: require('../../assets/documents/watch.png')
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '公文管理'})
    },
    mounted() {
      this.$bridge.callHandler('navTitle', {title: '公文管理'})
    }
  }
</script>

<style lang="less">
  .document-grid {
    padding-top: 15px;
    .van-grid-item__content {
      border-radius: 8px;
      box-shadow: 0 0 10px #e6e8ee;
    }
    .van-grid-item__content {
      padding: 20px 5.1vw;
    }
    .grid-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding-top: 20px;
      padding-bottom: 20px;
      .van-image {
        padding-right: 14px;
      }
      h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
      }
    }
  }
</style>